<template>
	<view class="index-container">
		<!-- 标题区域 -->
		<view class="title-section bg-blue">
			<text class="main-title">朋知云学</text>
			<text class="sub-title">让教育无远弗届</text>
		</view>
		<!-- 搜索栏 -->
		<view class="search-bar bg-blue">
			<view class="search-box">
				<uni-icons type="search" size="20" color="#fff"/>
				<input 
					placeholder="搜索学校或科目" 
					placeholder-class="placeholder-style"
					class="search-input"
					v-model="searchKeyword"
					@confirm="handleSearch"
					@input="handleSearch"
				/>
			</view>
		</view>
		
		<!-- 分类导航 -->
		<scroll-view scroll-x class="category-scroll">
			<view 
				v-for="(item, index) in categories" 
				:key="index"
				:class="['category-item', { active: activeCategory === index }]"
				@click="activeCategory = index"
			>
				{{ item.name }}
			</view>
		</scroll-view>
		
		<!-- 公告轮播 -->
		<swiper class="notice-swiper" autoplay circular>
			<swiper-item 
				v-for="(post, index) in topPosts" 
				:key="index"
				class="swiper-item"
			>
				<view class="notice-card">
					<uni-icons type="info" size="18" color="#fff"/>
					<text class="notice-text">{{ post.title }}</text>
				</view>
			</swiper-item>
		</swiper>
		
		<!-- 需求列表 -->
		<view class="post-list">
			<!-- 置顶帖子 -->
			<view 
				v-for="post in pinnedPosts" 
				:key="post.id"
				class="post-item pinned-post"
				@click="viewPostDetail(post.id)"
			>
				<view class="pin-badge">
					<uni-icons type="star-filled" size="14" color="#fff"></uni-icons>
					<text>置顶</text>
				</view>
				<view class="post-header">
					<image :src="post.author.avatar" class="avatar" />
					<text class="author">{{ post.author.name }}</text>
					<text class="time">{{ post.createTime | formatTime }}</text>
				</view>
				<text class="content">{{ post.content }}</text>
				<view class="post-footer">
					<view class="action-item" @click.stop="toggleLike(post)">
						<image :src="post.isLiked ? '/static/赞.png' : '/static/赞.png'" class="action-icon" :class="{ 'active': post.isLiked }" style="width: 26rpx; height: 26rpx;"></image>
						<text class="action-text">{{ post.likes || 0 }}</text>
					</view>
					<view class="action-item" @click.stop="toggleCollect(post)">
						<image :src="post.isCollected ? '/static/收藏1.png' : '/static/收藏1.png'" class="action-icon" :class="{ 'active': post.isCollected }" style="width: 26rpx; height: 26rpx;"></image>
						<text class="action-text">收藏</text>
					</view>
					<view class="action-item" @click.stop="sharePost(post)">
						<image src="/static/分享1.png" class="action-icon" style="width: 26rpx; height: 26rpx;"></image>
						<text class="action-text">分享</text>
					</view>
				</view>
			</view>
			
			<!-- 普通帖子 -->
			<view 
				v-for="post in normalPosts" 
				:key="post.id"
				class="post-item"
				@click="viewPostDetail(post.id)"
			>
				<view class="post-header">
					<image :src="post.author.avatar" class="avatar" />
					<text class="author">{{ post.author.name }}</text>
					<text class="time">{{ post.createTime | formatTime }}</text>
				</view>
				<text class="content">{{ post.content }}</text>
				<view class="post-footer">
					<view class="action-item" @click.stop="toggleLike(post)">
						<image :src="post.isLiked ? '/static/赞.png' : '/static/赞.png'" class="action-icon" :class="{ 'active': post.isLiked }" style="width: 26rpx; height: 26rpx;"></image>
						<text class="action-text">{{ post.likes || 0 }}</text>
					</view>
					<view class="action-item" @click.stop="toggleCollect(post)">
						<image :src="post.isCollected ? '/static/收藏1.png' : '/static/收藏1.png'" class="action-icon" :class="{ 'active': post.isCollected }" style="width: 26rpx; height: 26rpx;"></image>
						<text class="action-text">收藏</text>
					</view>
					<view class="action-item" @click.stop="sharePost(post)">
						<image src="/static/分享1.png" class="action-icon" style="width: 26rpx; height: 26rpx;"></image>
						<text class="action-text">分享</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 悬浮按钮 -->
		<view class="fab-box" @click="goPost">
			<view class="fab-btn bg-blue">
				<text class="plus-icon">+</text>
			</view>
		</view>
		
		<!-- AI小助手悬浮按钮 -->
		<view class="ai-assistant-box" @click="toggleAiAssistant">
			<view class="ai-assistant-btn bg-blue">
				<image src="/static/avatar1.png" class="ai-icon-img" mode="aspectFit"></image>
			</view>
			<!-- 气泡提示 -->
			<view class="ai-bubble" v-if="showAiBubble">
				<text class="bubble-text">我是朋知小助手,快来和我聊天吧</text>
				<view class="bubble-arrow"></view>
			</view>
		</view>
		
		<!-- AI小助手对话框 -->
		<view class="ai-assistant-dialog" v-if="showAiAssistant">
			<view class="dialog-header">
				<text class="dialog-title">小助手</text>
				<view class="close-btn" @click="toggleAiAssistant">
					<text>×</text>
				</view>
			</view>
			<view class="dialog-content">
				<view class="ai-message">
					<text>你好！我是AI小助手，可以帮你分析适合的队伍和需求。请选择你想了解的内容：</text>
				</view>
				<view class="option-buttons">
					<button class="option-btn" @click="analyzeTeams">适合我的队伍</button>
					<button class="option-btn" @click="analyzeDemands">推荐的需求</button>
					<button class="option-btn" @click="getPersonalizedAdvice">个性化建议</button>
				</view>
				<view class="ai-message" v-if="aiResponse">
					<text>{{ aiResponse }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeCategory: 0,
				categories: [
					{ name: '紧急需求' },
					{ name: '长期招募' },
					{ name: '学科教学' },
					{ name: '艺术培训' },
					{ name: '暑期项目' }
				],
				topPosts: [
					{ id: 1, title: '社区发帖规范及管理公告' },
					{ id: 2, title: '新手入门指南' }
				],
				posts: [],
				searchKeyword: '',
				showAiAssistant: false,
				aiResponse: '',
				showAiBubble: false,
				bubbleTimer: null,
				pinnedPostsData: [
					{
						id: 'pinned-1',
						content: '小程序使用教程：点击右下角"+"按钮发布需求，在个人中心查看申请状态，使用AI小助手获取个性化推荐。',
						author: {
							name: '朋知云学官方',
							avatar: '/static/avatar1.png'
						},
						createTime: new Date().getTime(),
						likes: 88,
						pinned: true,
						subject: '使用教程'
					},
					{
						id: 'pinned-2',
						content: '用户守则：请文明发言，不得发布违法违规内容，尊重原创，不侵犯他人知识产权，违规内容将被删除。',
						author: {
							name: '朋知云学官方',
							avatar: '/static/avatar1.png'
						},
						createTime: new Date().getTime(),
						likes: 66,
						pinned: true,
						subject: '用户守则'
					}
				]
			}
		},
		onLoad() {
			// 启动气泡定时器
			this.startBubbleTimer();
		},
		onShow() {
			this.loadPosts()
			// 重新启动气泡定时器
			this.startBubbleTimer();
		},
		onHide() {
			// 页面隐藏时清除定时器
			this.clearBubbleTimer();
		},
		onUnload() {
			// 页面卸载时清除定时器
			this.clearBubbleTimer();
		},
		computed: {
			// 获取置顶帖子
			pinnedPosts() {
				// 合并固定的置顶帖子和用户发布的置顶帖子
				const userPinnedPosts = this.posts.filter(post => post.pinned);
				return [...this.pinnedPostsData, ...userPinnedPosts].map(post => ({
					...post,
					isLiked: this.isLiked(post.id),
					isCollected: this.isCollected(post.id)
				}));
			},
			// 获取普通帖子
			normalPosts() {
				return this.posts.filter(post => !post.pinned).map(post => ({
					...post,
					isLiked: this.isLiked(post.id),
					isCollected: this.isCollected(post.id)
				}));
			}
		},
		methods: {
			// 启动气泡定时器
			startBubbleTimer() {
				// 清除可能存在的旧定时器
				this.clearBubbleTimer();
				
				// 设置新的定时器，每30秒显示一次气泡
				this.bubbleTimer = setInterval(() => {
					// 如果对话框没有打开，才显示气泡
					if (!this.showAiAssistant) {
						this.showAiBubble = true;
						
						// 5秒后自动隐藏气泡
						setTimeout(() => {
							this.showAiBubble = false;
						}, 5000);
					}
				}, 30000); // 30秒
				
				// 初始显示一次气泡
				setTimeout(() => {
					if (!this.showAiAssistant) {
						this.showAiBubble = true;
						
						setTimeout(() => {
							this.showAiBubble = false;
						}, 5000);
					}
				}, 3000); // 页面加载3秒后显示第一次
			},
			// 清除气泡定时器
			clearBubbleTimer() {
				if (this.bubbleTimer) {
					clearInterval(this.bubbleTimer);
					this.bubbleTimer = null;
				}
			},
			toggleAiAssistant() {
				this.showAiAssistant = !this.showAiAssistant
				// 如果关闭对话框，清空回复
				if (!this.showAiAssistant) {
					this.aiResponse = ''
				}
				// 隐藏气泡
				this.showAiBubble = false;
			},
			analyzeTeams() {
				// 模拟AI分析适合的队伍
				const userApplications = uni.getStorageSync('applications') || []
				const userCollections = uni.getStorageSync('collections') || []
				
				if (userApplications.length === 0 && userCollections.length === 0) {
					this.aiResponse = '您尚未提交申请或收藏任何需求，建议您先浏览一些需求并收藏感兴趣的项目，这样我可以更好地为您推荐适合的队伍。'
					return
				}
				
				// 根据用户历史行为分析偏好
				const subjects = userCollections.map(item => item.subject).filter(Boolean)
				const locations = userCollections.map(item => item.location).filter(Boolean)
				
				let response = '根据您的历史行为分析，您可能适合以下类型的队伍：\n\n'
				
				if (subjects.length > 0) {
					response += `1. 您对${subjects.join('、')}等学科感兴趣，建议加入相关学科的支教团队\n`
				}
				
				if (locations.length > 0) {
					response += `2. 您关注的地区主要集中在${locations.join('、')}，这些地区的支教团队可能更适合您\n`
				}
				
				response += '\n3. 建议您查看"长期招募"分类下的支教团队，这些团队通常更稳定且有经验'
				
				this.aiResponse = response
			},
			analyzeDemands() {
				// 模拟AI分析推荐的需求
				const userApplications = uni.getStorageSync('applications') || []
				const posts = uni.getStorageSync('posts') || []
				
				if (userApplications.length === 0) {
					this.aiResponse = '您尚未提交任何申请，建议您先浏览并申请一些支教需求，这样我可以更好地了解您的偏好。'
					return
				}
				
				// 分析用户申请历史
				const appliedSubjects = userApplications.map(item => item.subject).filter(Boolean)
				const appliedLocations = userApplications.map(item => item.location).filter(Boolean)
				
				// 找出可能感兴趣的需求
				const recommendedPosts = posts.filter(post => {
					// 已申请的不再推荐
					if (userApplications.some(app => app.postId === post.id)) {
						return false
					}
					
					// 根据学科或地区匹配
					return appliedSubjects.includes(post.subject) || 
						   appliedLocations.includes(post.location)
				}).slice(0, 3) // 最多推荐3个
				
				if (recommendedPosts.length === 0) {
					this.aiResponse = '根据您的历史行为，暂时没有找到特别匹配的需求。建议您尝试浏览更多不同类型的支教需求，或者调整您的偏好设置。'
					return
				}
				
				let response = '根据您申请历史，以下需求可能适合您：\n\n'
				
				recommendedPosts.forEach((post, index) => {
					response += `${index + 1}. ${post.content.substring(0, 30)}...\n   地点：${post.location || '未知'}\n   学科：${post.subject || '未知'}\n\n`
				})
				
				response += '点击需求列表中的相应项目可查看详情。'
				
				this.aiResponse = response
			},
			getPersonalizedAdvice() {
				// 模拟AI提供个性化建议
				const userApplications = uni.getStorageSync('applications') || []
				const userCollections = uni.getStorageSync('collections') || []
				
				if (userApplications.length === 0 && userCollections.length === 0) {
					this.aiResponse = '您尚未有任何支教相关的活动记录。建议您：\n\n1. 浏览首页的支教需求，了解当前热门的支教项目\n2. 收藏感兴趣的支教需求，方便后续查看\n3. 尝试申请一些短期支教项目，积累经验'
					return
				}
				
				// 分析申请状态
				const pendingApplications = userApplications.filter(app => app.status === 'pending' || app.status === '待审核').length
				const approvedApplications = userApplications.filter(app => app.status === 'approved' || app.status === '已通过').length
				
				let response = '根据您的个人情况，以下是我的建议：\n\n'
				
				if (pendingApplications > 0) {
					response += `1. 您目前有${pendingApplications}个申请正在审核中，建议耐心等待结果\n\n`
				}
				
				if (approvedApplications > 0) {
					response += `2. 恭喜！您已有${approvedApplications}个申请被通过，建议及时与校方联系，确认支教细节\n\n`
				} else {
					response += '2. 您尚未有申请被通过，建议：\n   - 完善个人资料，提高申请成功率\n   - 尝试申请更多样化的支教项目\n   - 在申请表中详细说明您的教学经验和特长\n\n'
				}
				
				response += '3. 长期发展建议：\n   - 积累多样化的支教经验\n   - 关注教育资源匮乏地区的需求\n   - 与其他支教志愿者建立联系，组建长期稳定的团队'
				
				this.aiResponse = response
			},
			toggleLike(post) {
				const likes = uni.getStorageSync('likes') || {}
				if (likes[post.id]) {
					post.likes = (post.likes || 1) - 1
					delete likes[post.id]
					post.isLiked = false
				} else {
					post.likes = (post.likes || 0) + 1
					likes[post.id] = true
					post.isLiked = true
				}
				uni.setStorageSync('likes', likes)
				this.$forceUpdate()
			},
			handleSearch() {
				if (!this.searchKeyword.trim()) {
					this.loadPosts()
					return
				}
				
				const keyword = this.searchKeyword.toLowerCase()
				// 搜索普通帖子
				const filteredPosts = uni.getStorageSync('posts')?.filter(post => 
					post.content.toLowerCase().includes(keyword) || 
					post.subject?.toLowerCase().includes(keyword)
				) || []
				
				// 搜索置顶帖子
				const filteredPinnedPosts = this.pinnedPostsData.filter(post => 
					post.content.toLowerCase().includes(keyword) || 
					post.subject?.toLowerCase().includes(keyword)
				)
				
				// 更新帖子列表，保留置顶标识
				this.posts = filteredPosts
			},
			goSearch() {
				uni.navigateTo({
					url: `/pages/search/index?keyword=${this.searchKeyword}`
				})
			},
			changeCategory(index) {
				this.activeCategory = index
				// 这里可以添加加载分类帖子的逻辑
			},
			viewPostDetail(id) {
				// 处理置顶帖子的特殊跳转
				if (id === 'pinned-1') {
					uni.navigateTo({
						url: '/pages/post/tutorial'
					});
					return;
				}
				if (id === 'pinned-2') {
					uni.navigateTo({
						url: '/pages/post/rules'
					});
					return;
				}
				// 普通帖子跳转
				uni.navigateTo({
					url: `/pages/post/detail?id=${id}`
				})
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			isCollected(id) {
				return (uni.getStorageSync('collections') || []).some(item => item.id === id)
			},
			isLiked(id) {
				const likes = uni.getStorageSync('likes') || {}
				return !!likes[id]
			},
			toggleCollect(post) {
				const collections = uni.getStorageSync('collections') || []
				const index = collections.findIndex(item => item.id === post.id)
				
				if (index === -1) {
					collections.push({
						id: post.id,
						...post // 添加完整帖子信息
					})
					uni.showToast({ title: '收藏成功' })
				} else {
					collections.splice(index, 1)
					uni.showToast({ title: '已取消收藏' })
				}
				
				uni.setStorageSync('collections', collections)
				uni.$emit('collection-updated') // 触发全局更新
			},
			goPost() {
				uni.switchTab({
					url: '/pages/post/create'
				})
			},
			loadPosts() {
				this.posts = uni.getStorageSync('posts') || []
				this.searchKeyword = '' // 清空搜索关键词
			}
		},
		mounted() {
			uni.$on('collection-updated', () => {
				this.posts = this.posts.map(post => ({
					...post,
					isCollected: this.isCollected(post.id)
				}))
			})
		}
	}
</script>

<style lang="scss" scoped>
.index-container {
	background: #f5f7fa;
	min-height: 100vh;
	position: relative;
	
	/* 添加水印效果 */
	&::before {
		content: "朋知云学";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none; /* 确保水印不会影响点击事件 */
		color: rgba(91, 192, 235, 0.04); /* 使用主题色但非常淡 */
		font-size: 60rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		/* 移除旋转效果，使文字水平排列 */
		transform: none;
		background-size: 400rpx 400rpx;
		background-image: repeating-linear-gradient(0deg, 
			transparent, 
			transparent 200rpx, 
			rgba(91, 192, 235, 0.02) 200rpx, 
			rgba(91, 192, 235, 0.02) 400rpx);
		z-index: 0; /* 确保水印在内容下方 */
	}
	
	.title-section {
		padding: 40rpx 30rpx 20rpx;
		text-align: center;
		
		.main-title {
			font-size: 48rpx;
			color: #fff;
			font-weight: bold;
			text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.1);
			display: block;
			margin-bottom: 10rpx;
		}
		
		.sub-title {
			font-size: 26rpx;
			color: rgba(255,255,255,0.9);
			display: block;
		}
	}
	
	.search-bar {
		padding: 20rpx 30rpx 80rpx;
		border-radius: 0 0 40rpx 40rpx;
		
		.search-box {
			background: rgba(255,255,255,0.2);
			border-radius: 50rpx;
			padding: 20rpx 30rpx;
			display: flex;
			align-items: center;
			
			.search-input {
				color: #fff;
				margin-left: 15rpx;
				font-size: 28rpx;
			}
			
			.placeholder-style {
				color: rgba(255,255,255,0.8);
			}
		}
	}

	.category-scroll {
		white-space: nowrap;
		padding: 0 30rpx;
		margin-top: -40rpx;
		
		.category-item {
			display: inline-block;
			padding: 12rpx 35rpx;
			margin-right: 20rpx;
			background: #fff;
			border-radius: 30rpx;
			font-size: 28rpx;
			color: #666;
			box-shadow: 0 4rpx 12rpx rgba(91,192,235,0.1);
			
			&.active {
				background: #5bc0eb;
				color: #fff;
			}
		}
	}

	.notice-swiper {
		height: 80rpx;
		padding: 0 30rpx;
		margin: 30rpx 0;
		
		.notice-card {
			background: linear-gradient(90deg, #5bc0eb, #4cd964);
			border-radius: 12rpx;
			padding: 18rpx 25rpx;
			display: flex;
			align-items: center;
			color: #fff;
			
			.notice-text {
				font-size: 26rpx;
				margin-left: 15rpx;
			}
		}
	}

	.post-list {
		padding: 0 30rpx;
		margin-bottom: 120rpx;
		
		.post-item {
			background: #fff;
			border-radius: 20rpx;
			padding: 35rpx;
			margin-bottom: 25rpx;
			box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.08);
			transition: all 0.3s ease;
			position: relative;
			
			&.pinned-post {
				background: linear-gradient(to right, #fff, #f0f9ff);
				border-left: 6rpx solid #5bc0eb;
				
				.pin-badge {
					position: absolute;
					top: 0;
					right: 0;
					background: #5bc0eb;
					color: #fff;
					font-size: 20rpx;
					padding: 6rpx 16rpx;
					border-radius: 0 20rpx 0 12rpx;
					display: flex;
					align-items: center;
					
					text {
						margin-left: 6rpx;
					}
				}
			}
			
			&:active {
				transform: scale(0.98);
				box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
			}
			
			.post-header {
				display: flex;
				align-items: center;
				margin-bottom: 25rpx;
				
				.avatar {
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
					margin-right: 20rpx;
					border: 2rpx solid rgba(91,192,235,0.2);
				}
				
				.author {
					font-size: 30rpx;
					color: #2c3e50;
					margin-right: 20rpx;
					font-weight: 500;
				}
				
				.time {
					font-size: 24rpx;
					color: #94a3b8;
				}
			}
			
			.content {
				font-size: 28rpx;
				color: #334155;
				line-height: 1.7;
				margin-bottom: 25rpx;
			}
			
			.post-footer {
				margin-top: 30rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				padding: 20rpx;
				border-top: 1px solid rgba(0,0,0,0.05);
				
				.action-item {
					display: flex;
					align-items: center;
					padding: 10rpx 20rpx;
					border-radius: 30rpx;
					transition: all 0.2s ease;
					
					&:active {
						transform: scale(0.95);
						background: rgba(91,192,235,0.1);
					}
					
					.action-icon {
						margin-right: 8rpx;
						transition: transform 0.2s ease;
						
						&.active {
							transform: scale(1.2);
						}
					}
					
					.action-text {
						font-size: 24rpx;
						color: #666;
					}
				}
			}
		}
	}

	.fab-box {
		position: fixed;
		right: 40rpx;
		bottom: 120rpx;
		z-index: 999;
		
		.fab-btn {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 8rpx 20rpx rgba(91, 192, 235, 0.3);
			transition: all 0.3s;
			
			&:active {
				transform: scale(0.9);
				opacity: 0.8;
			}

			.plus-icon {
				font-size: 60rpx;
				font-weight: 300;
				margin-bottom: 6rpx;
				color: #fff;
			}
		}
	}
}

.bg-blue {
	background: #5bc0eb;
}

.fab-btn {
	position: relative;
	z-index: 1000;
}

@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateY(20rpx) scale(0.9);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes pulse {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.05);
	}
	100% {
		transform: scale(1);
	}
}

/* AI小助手样式 */
.ai-assistant-box {
	position: fixed;
	right: 40rpx;
	bottom: 240rpx;
	z-index: 999;
}

.ai-assistant-btn {
	width: 90rpx;
	height: 90rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8rpx 20rpx rgba(91, 192, 235, 0.3);
	transition: all 0.3s;
	background: linear-gradient(#5bc0eb);
	animation: pulse 2s infinite ease-in-out;
	
	&:active {
		transform: scale(0.9);
		opacity: 0.8;
		animation: none;
	}
	
	.ai-icon-img {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		transition: transform 0.4s;
	}
}

/* 气泡样式 */
.ai-bubble {
	position: fixed;
	bottom: 340rpx;
	right: 40rpx;
	transform: none;
	background-color: #f9fbfd;
	padding: 20rpx 24rpx;
	border-radius: 16rpx;
	box-shadow: 0 6rpx 16rpx rgba(0,0,0,0.12);
	animation: fadeIn 0.5s ease;
	width: 400rpx;
	z-index: 1000;
	border: 1px solid rgba(91, 192, 235, 0.3);
	
	.bubble-text {
		font-size: 28rpx;
		color: #333;
		line-height: 1.6;
		font-weight: 400;
		text-align: center;
		display: block;
		word-wrap: break-word;
	}
	
	.bubble-arrow {
		position: absolute;
		bottom: -20rpx;
		right: 60rpx;
		margin-left: 0;
		width: 0;
		height: 0;
		border-left: 10rpx solid transparent;
		border-right: 10rpx solid transparent;
		border-top: 20rpx solid #f9fbfd;
		filter: drop-shadow(0 2rpx 2rpx rgba(0,0,0,0.05));
	}
}

.ai-assistant-dialog {
	position: fixed;
	right: 40rpx;
	bottom: 360rpx;
	width: 600rpx;
	background: #fff;
	border-radius: 20rpx;
	box-shadow: 0 10rpx 30rpx rgba(0,0,0,0.15);
	z-index: 1001;
	overflow: hidden;
	animation: slideIn 0.3s ease;
	border: 1px solid rgba(91, 192, 235, 0.3);
	transform-origin: bottom right;
	
	.dialog-header {
		background: linear-gradient(90deg, #5bc0eb, #4a90e2);
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid rgba(91, 192, 235, 0.2);
		
		.dialog-title {
			color: #fff;
			font-size: 32rpx;
			font-weight: 500;
		}
		
		.close-btn {
			width: 40rpx;
			height: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			
			text {
				color: #fff;
				font-size: 40rpx;
				line-height: 1;
			}
		}
	}
	
	.dialog-content {
		padding: 30rpx;
		max-height: 600rpx;
		overflow-y: auto;
		background: linear-gradient(to bottom, #f9fbfd, #f5f7fa);
		
		.ai-message {
			background-color: #fff;
			padding: 24rpx;
			border-radius: 12rpx;
			margin-bottom: 30rpx;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
			border-left: 4rpx solid #5bc0eb;
			
			text {
				font-size: 30rpx;
				color: #333;
				line-height: 1.6;
				white-space: pre-line;
			}
		}
		
		.option-buttons {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 20rpx;
			margin: 30rpx 0 40rpx;
			animation: fadeIn 0.5s ease;
			width: 100%;
			
			.option-btn {
				background: linear-gradient(to right, rgba(91, 192, 235, 0.1), rgba(74, 144, 226, 0.1));
				color: #5bc0eb;
				border: 1px solid #5bc0eb;
				border-radius: 12rpx;
				font-size: 28rpx;
				padding: 15rpx 0;
				border-radius: 8rpx;
				text-align: center;
				box-shadow: 0 4rpx 12rpx rgba(91, 192, 235, 0.2);
				transition: all 0.3s;
				
				&:active {
					transform: scale(0.98);
					box-shadow: 0 2rpx 8rpx rgba(91, 192, 235, 0.2);
				}
			}
		}
	}
}

/* 动画效果 */
@keyframes pulse {
	0% {
		transform: scale(1);
		box-shadow: 0 8rpx 20rpx rgba(91, 192, 235, 0.3);
	}
	50% {
		transform: scale(1.05);
		box-shadow: 0 12rpx 24rpx rgba(91, 192, 235, 0.4);
	}
	100% {
		transform: scale(1);
		box-shadow: 0 8rpx 20rpx rgba(91, 192, 235, 0.3);
	}
}

@keyframes slideIn {
	from {
		transform: scale(0.9) translateY(20rpx);
		opacity: 0;
	}
	to {
		transform: scale(1) translateY(0);
		opacity: 1;
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 480px) {
	.fab-btn ::v-deep .uni-icons {
		font-size: 44rpx !important;
	}
}
</style>

data() {
	return {
		activeCategory: 0,
		categories: [
			{ name: '紧急需求' },
			{ name: '长期招募' },
			{ name: '学科教学' },
			{ name: '艺术培训' },
			{ name: '暑期项目' }
		],
		topPosts: [
			{ id: 1, title: '社区发帖规范及管理公告' },
			{ id: 2, title: '新手入门指南' }
		],
		posts: [],
		searchKeyword: ''
	}
},

methods: {
	sharePost(post) {
		uni.share({
			provider: "weixin",
			scene: "WXSceneSession",
			type: 0,
			title: "朋知云学 - 支教需求",
			summary: post.content,
			success: function() {
				uni.showToast({
					title: '分享成功',
					icon: 'success'
				})
			},
			fail: function() {
				uni.showToast({
					title: '分享失败',
					icon: 'error'
				})
			}
		})
	},
	toggleLike(post) {
		const likes = uni.getStorageSync('likes') || {}
		if (likes[post.id]) {
			post.likes = (post.likes || 1) - 1
			delete likes[post.id]
			post.isLiked = false
		} else {
			post.likes = (post.likes || 0) + 1
			likes[post.id] = true
			post.isLiked = true
		}
		uni.setStorageSync('likes', likes)
		this.$forceUpdate()
	},
	toggleCollect(post) {
		const collections = uni.getStorageSync('collections') || {}
		if (collections[post.id]) {
			post.collections = (post.collections || 1) - 1
			delete collections[post.id]
			post.isCollected = false
		} else {
			post.collections = (post.collections || 0) + 1
			collections[post.id] = true
			post.isCollected = true
		}
		uni.setStorageSync('collections', collections)
		this.$forceUpdate()
	},
	loadPosts() {
		const posts = uni.getStorageSync('posts') || []
		const likes = uni.getStorageSync('likes') || {}
		const collections = uni.getStorageSync('collections') || {}
		
		this.posts = posts.map(post => ({
			...post,
			isLiked: !!likes[post.id],
			isCollected: !!collections[post.id]
		}))
		this.searchKeyword = ''
	},
}
